<template>
  <div class="aaa">
    <div class="background">
      <!-- 背景图片 -->
      <img src="../assets/1.png" width="100%" height="100%" alt="" />
    </div>
    <div class="login">
        <div class="login-form">
          <el-form label-width="80px">
            {{ message }}
            <el-form-item>
              <el-input v-model="user.userName" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="user.password" placeholder="密码" type="password"></el-input>
            </el-form-item>
            <div style="text-align: center">
              <!-- 按钮的边距 -->
              <span class="log">
              <el-button type="primary" @click="login">
                登陆
              </el-button>
              </span>
                <span class="reset">
                   <el-button type="button">注册</el-button>
                </span>
            </div>
          </el-form>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //头像图片
      circleUrl: require("@/assets/2.png"),
      // 头像白边图片
      imgWhite: require("@/assets/3.png"),
      user: { userName: "", passsword: "" },
      message: "",
      // 整张背景图片
      imgSrc: require("@/assets/1.png"),

    };
  },
  methods: {
     login(){
         debugger
         this.$axios.post('/user/user/user/login2',this.user)
         .then(res => {
            alert(res.data.code)
           if(res.data.success==true){
             console.log(res.data)
             window.sessionStorage.setItem('token',res.data.data)
             localStorage.setItem('token',res.data.data)
             this.$router.push("/home")
           }else{
             alert("登陆失败！账号或密码错误！！！！")
           }
         })
    },
  },
};
</script>

<style>
 /* 背景 */
.background {
  width: 100%;
  height: 100%; /**宽高100%是为了图片铺满屏幕 */
}
 /* 登录的整体 */
.login {
  /* 填料 */
  padding: 12px;
  position: absolute;
  /* 顶部距离 */
  top: 60%;
  /* 左侧距离 */
  left: 50%;
  transform: translate(-50%, -50%);
  /* 表单背景颜色 */
  background-color: rgb(13, 66, 128);
  width: 400px;
  height: 250px;
}
/* 头像 */
.login-imghead {
  position: absolute;
  /* 页头高度 */
  margin-top: -70px;
  /* 宽度 */
  width: 150px;
  /* 高度 */
  height: 150px;
   /* 左侧距离 */
  left: 35%;
}
/* 头像白边 */
.login-imgWhite {
  position: absolute;
  margin-top: -79.3px;
  width: 150px;
  height: 150px;
  left: 32.8%;
}
/* 表单 */
.login-form {
  width: 420px;
  padding-top: 80px;
  margin-left: -51px;
}
  /* 按钮的边距  */
.reset {
  /* 左侧页面空白 */
  margin-left: 50px;
}
.log{
  margin-left: 50px;
}

</style>
